<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--是元素沿着xyz旋转-->
  <style>
    body {
      perspective: 800px;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: #bfa;
      margin: 200px auto;
      transition: all 3s;
    }

    /*.box1:hover {*/
    /*    transform: rotateZ(45deg);*/
    /*}*/

    body:hover .box1 {
      /*transform: rotateZ(360deg);*/
      transform: rotateY(3600deg);
    }
  </style>
</head>
<body>
<div class="box1">

</div>
</body>
</html>